<template>
  <Card>
    <Form :model="form" ref="form" :label-width="80" :rules="rules">
      <FormItem label="编码">
        <Select v-model="form.encoding">
          <Option value="gb2312">gb2312(QQ音乐)</Option>
          <Option value="utf-8">utf-8</Option>
        </Select>
      </FormItem>
      <FormItem label="选择文件" prop="originFilePath">
        <Input v-model="form.originFilePath"></Input>
        <Upload
            :before-upload="handleFile"
            type="drag"
            action="//jsonplaceholder.typicode.com/posts/"
            accept=".lrc">
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽选择文件</p>
          </div>
        </Upload>
      </FormItem>
      <FormItem label="未播放">
        <ColorPicker v-model="form.playedColor" />
      </FormItem>
      <FormItem label="已播放">
        <ColorPicker v-model="form.unPlayedColor" />
      </FormItem>
      <FormItem>
        <Button type="primary" @click="start">开始</Button>
        <Button @click="openFolder">
          <Icon type="ios-folder"></Icon>
        </Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
import {shell} from 'electron'

/**
 * lrc转换卡拉ok样式工具
 * @作者：陈明明
 * @创建日期 ： 2021/4/5 18:26
 */
export default {
  name: 'lrcToKaraokePr',
  data() {
    return {
      converts: [
        {label: 'lrc歌词转Srt', key: 'qqLrcToSrt'}
      ],
      form: {
        encoding: 'gb2312',
        originFilePath: '',
        playedColor: '#0032B0',
        unPlayedColor: '#FFFFFF'
      },
      rules: {
        originFilePath: [{required: true, message: '路径不能为空', trigger: 'blur'}]
      },
      newPath: ''
    }
  },
  methods: {
    save() {
    },
    openFolder() {
      if (this.newPath) {
        shell.showItemInFolder(this.newPath)
      }
    },
    handleFile(file) {
      this.form.originFilePath = file.path
      return false
    },
    start() {
      this.$refs.form.validate(res => {
        if (!res) {
          this.$Message.success('请检查输入')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>